<template>
  <!-- 封装一个通用的附件管理组件 -->
  <div class="media-container">
    <el-card>
      <div
        class="item"
        v-for="item in mediaData"
        :key="item.id"
        @click="clickHander(item)"
      >
        <el-image
          style="width: 100px; height: 100px"
          :src="item.path_url"
          fit="cover"
        >
        </el-image>

        <el-tooltip
          v-if="isShowDeleteIcon"
          effect="dark"
          content="删除"
          placement="top"
        >
          <span
            class="del el-icon-close"
            @click.stop="$emit('delete', item)"
          ></span>
        </el-tooltip>

        <!-- 遮盖层mask -->
        <div class="mask" v-if="isShowMask && item.id == selectId">
          <i class="el-icon-check check"></i>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    checkId: {
      type: [Number, String],
      default: 0,
    },
    mediaData: {
      type: Array,
      required: true,
      default: () => {
        return []
      },
    },
    isShowDeleteIcon: {
      type: Boolean,
      default: false,
    },
    isShowMask: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectId: 0,
    }
  },
  methods: {
    clickHander(item) {
      this.selectId = item.id
      // 子通信父
      this.$emit('click', item)
      // 更新props(实现props双向绑定)
      this.$emit('update:check-id', this.selectId)
    },
  },
  mounted() {
    console.log('mounted')
    this.selectId = this.checkId
  },
}
</script>

<style lang="scss" scoped>
.media-container {
  .el-card {
    // 深度选择器，可以作用到当前页面组件的内容
    ::v-deep .el-card__body {
      display: flex;
      flex-wrap: wrap;
      .el-image {
        margin: 10px;
      }

      .item {
        position: relative;
        margin: 10px;
        .del {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 24px;
          height: 24px;
          background-color: #b8bcb8;
          border-radius: 50%;
          padding: 2px;
          color: red;
          position: absolute;
          top: 0px;
          right: 0px;
          font-size: 19px;
          cursor: pointer;
        }

        .mask {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          inset: 0;
          // top: 0;
          // left: 0;
          // bottom: 0;
          // right: 0;
          background-color: rgba(0, 0, 0, 0.5);

          .check {
            font-size: 40px;
            color: #f3f3f3;
          }
        }
      }
    }
  }
}
</style>
